<template>
  <div class="login">
    <div class="box">
      <el-row class="demo-autocomplete">
        <el-col :span="12">
          <el-autocomplete class="inline-input" v-model="userName" :fetch-suggestions="querySearch" placeholder="请输入账号" @select="handleSelect"></el-autocomplete>
        </el-col>
        <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: '',
      password: '',
      restaurants: [],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
        { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style scoped>
/* @import url(''); 引入css样式 */
</style>